<template>
  <div class="doctorregister">
    <div class="container ">
      <!-- 头部信息 -->
      <header>
      <Row>
        <Col :xs="24">
          <div class="margin-up-down">
            <fourLevelLinkage
              @changeProvince="changeProvince"
              @changeCity="changeCity"
              @changeArea="changeArea"
              @changeHospital="changeHospital"
              :province="province"
              :city="city"
              :area="area"
              :hospital="hospital"
              :hospitalType="1"
            ></fourLevelLinkage>
          </div>
          <div class="margin-up-down">
              <Select class="w-select" clearable v-model="businessType" placeholder="复审类别" style='width:130px;'>
                  <Option
                      v-for="item in businessList"
                      :value="item.businessType"
                      :key="item.businessType"
                      style='text-align:center'
                  >{{item.name}}</Option>
              </Select>
          </div>  
          <div class="margin-up-down">
              <Select class="w-select" clearable v-model="reviewStatus" placeholder="审核状态" style='width:130px;'>
                  <Option
                      v-for="item in reviewList"
                      :value="item.reviewId"
                      :key="item.reviewId"
                      style='text-align:center'
                  >{{item.name}}</Option>
              </Select>
          </div>  
          <div class="margin-up-down">
            <Button type="primary" icon="ios-search" @click="getSuperviseData(1)"></Button>
          </div>
        </Col>
      </Row>  
      </header>   
      <!-- 列表 -->
      <div class="list">
        <Table @on-selection-change="selectChange" :loading="tableLoading" border stripe :columns="columns1" :data="list"></Table>
      </div>
    </div>
    <!--分页器-->
    <div class="page">
      <Page :total="superviseListSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
    </div>
	<comparatRecord v-if="comparatRecordModal" :comparatRecordModal= 'comparatRecordModal' :id = 'id' :businessType = 'businessType' :reviewStatus = 'reviewStatus' @getSuperviseData='getSuperviseData' />
	<check v-if="checkModal" :checkModal= 'checkModal' :id = 'id' :businessType = 'businessType' :reviewStatus = 'reviewStatus' @getSuperviseData='getSuperviseData' />
  </div>
</template>
<script>
// 医生注册信息
import cookie from "@/utils/cookie.js";
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import comparatRecord from "./../secordTrial/components/comparatRecord";
import check from './components/check.vue';

export default {
  components: {
    fourLevelLinkage,
    comparatRecord,
    check,
  },
  data() {
    return {
      tableLoading: false,
      province: null,
      city: null,
      area: null,
      hospital: null,
      selections: [],
      superviseListSize: 0,
      list: [],
      pageNo: 1,
      pageSize: 10,
      columns1: [
        {title: "排序",key: "sum",width: 80,align: "center",
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {title: "机构名称",key: "hospitalName",align: "center"},
        {title: "复审类别",key: "businessType",align: "center",
          render: (h, params) => {
            let status = params.row.businessType;
            let name;
            switch (status) {
              case 0:
                name = "基本信息";
                break;
              case 1:
                name = "资质信息";
                break;
              case 2:
                name = "诊疗服务";
                break;
              case 3:
                name = "诊疗范围";
                break;
              case 4:
                name = "协议信息";
                break;
              case 5:
                name = "设立信息";
                break;
              case 6:
                name = "第三方信息";
                break;
              case 7:
                name = "医护人员";
                break;
              case 8:
                name = "收费标准";
                break;
            }
            return h("span", {}, name);
          }
        },
        {title: "申请人",key: "applicant",align: "center"},
        {title: "申请时间",key: "applicantTime",align: "center"},
        {
          title: "审批人",key: "reviewerName",align: "center", 
        },
        {title: "审批时间",key: "reviewTime",align: "center",},
        {title: "审批状态",key: "reviewStatus",align: "center",
          render(h, params) {
            return ['新建', '待审核', '审核通过','驳回'][params.row.reviewStatus];
          }
        },               
        {
          title: "设置",
          key: "iOperate",
          width: 200,
          align: "center",
          render: (h, params) => {
            let row = params.row;
            return h("div", [
                row.reviewStatus==1 ? 
                  h(
                    "span",
                    {
                      props: {
                        size: "small"
                      },
                      style: {
                          color: '#5362e1',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleReview(row);
                        }
                      }
                    },
                    "审核"
                  )
                  : null, 
                row.reviewStatus==2 || row.reviewStatus==3 ? 
                  h(
                    "span",
                    {
                      props: {
                        size: "small"
                      },
                      style: {
                          color: '#fc6c49',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleReview(row,0);
                        }
                      }
                    },
                    "查看"
                  )
                  : null,
            ]);
          }
        }
      ],
      businessList: [
        {name:'基本信息',businessType: 0},
        {name:'资质信息',businessType: 1},
        {name:'诊疗服务',businessType: 2},
        {name:'诊疗范围',businessType: 3},
        {name:'协议信息',businessType: 4},
        {name:'设立信息',businessType: 5},
        {name:'第三方信息',businessType: 6},
        {name:'医护人员',businessType: 7},
        {name:'收费标准',businessType: 8},
      ],
      reviewList: [
          {name:'待审核',reviewId: 1},
          {name:'已审核',reviewId: 2},
          {name:'已驳回',reviewId: 3},
      ],
      reviewStatus: 6,
      comparatRecordModal: false,
      checkModal: false,
      id: '',
      reasonChange: '',
    };
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/supervision/qualificationApply/list",
        title: "资质申请"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    if (pageNo) {
      this.pageNo = pageNo;
    }
    this.getSuperviseData(this.pageNo);
  },
  methods: {
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    changeHospital(val) {
      this.hospital = val;
    },
    selectChange(selections) {
        this.selections = selections;
    },
    //查看详情
    handleReview(item) {
      if(item.businessType == 7 || item.businessType == 8) {
        this.checkModal = true
      } else {
        this.comparatRecordModal = true
      }
      this.id = item.id
      this.businessType = item.businessType
      this.reviewStatus = item.reviewStatus
    },
    // 分页
    pageChange(index) {
      this.getSuperviseData(index);
    },
    // 获取页面数据
    getSuperviseData(pageNo) {
      this.comparatRecordModal = false
      this.checkModal = false
      if  (pageNo) {
        this.pageNo = Number(pageNo);
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        businessType: this.businessType ? this.businessType : '',
        reviewStatus: this.reviewStatus ? this.reviewStatus : 6,
      };
      params.provinceCode = this.province ? this.province : null;
      params.cityCode = this.city ? this.city : null;
      params.districtCode = this.area ? this.area : null;
      params.hospitalId = this.hospital ? this.hospital : null;
      this.tableLoading = true;
      this.$axios.post(api.findSuperviseReviewApplicantPage, params).then(res => {
        if (res.data.code) {
          let ret = res.data.object;
          this.superviseListSize = ret.total;
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
            });           
            this.list = ret.records;
          } else {
            this.list = []
          }
        } else {
          this.$Message.info(res.data.message);
        }
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    }
  },
  watch: {
    'pageSize'(nv, ov) {
        this.getSuperviseData(this.pageNo)
    },
  }
};
</script>
<style lang="less" scoped>
.doctorregister {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
    .margin-up-down {
		display: inline-block;
		margin: 10px 0;
    }
	.addButton{
		border: 1px solid #21c780;
		background-color: #21c780;
	}
    .container {
		width: 100%;
		margin: 0 auto;
		header {
			width: 100%;
			position: relative;
			.search{
				margin: 10px 0;
			}
			
		}
		.list {
			width: 100%;
			margin: 10px 0;
		}
    }
    .page{
        text-align: center;
    }
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
        overflow-x: hidden;
    }
}
</style>